/* ------------------------------------------------------------------------------
 *
 *  # Sweet alerts
 *
 *  Styles for sweet_alert.min.js - A beautiful replacement for JavaScript's "Alert"
 *
 *  Version: 1.1
 *  Latest update: Oct 28, 2015
 *
 * ---------------------------------------------------------------------------- */

/* # Core
-------------------------------------------------- */

// Disable scrolling
body.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

// Overlay
.sweet-overlay {
  background-color: fade(#000, 40%);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  z-index: @zindex-modal;
}

// Alert
.sweet-alert {
  background-color: #fff;
  width: 470px;
  padding: @content-padding-large;
  border-radius: @border-radius-base;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -235px;
  margin-top: -200px;
  overflow: hidden;
  display: none;
  z-index: (@zindex-modal + 10);

  // Heading
  h2 {
    margin-top: (@line-height-computed / 2);
    font-size: @font-size-h4;
    text-align: center;
    display: block;
    position: relative;
  }

  // Paragraph
  p {
    text-align: center;
    position: relative;
  }

  // Fieldset
  fieldset {
    border: none;
    position: relative;
  }

  // Buttons
  button {
    background-color: @brand-primary;
    color: #fff;
    border: 0;
    border-radius: @border-radius-base;
    padding: @padding-base-vertical @content-padding-base;
    margin: (@line-height-computed / 2) 5px 0 5px;
    box-shadow: none !important;

    // Hover state
    &:hover {
      background-color: @color-primary-600;
    }

    // Remove outline on focus
    &:focus {
      outline: 0;
    }

    // Active state
    &:active {
      background-color: @color-primary-400;
    }

    // Cance; button
    &.cancel {
      background-color: transparent;
      color: @text-color;
    }

    // Disabled state
    &[disabled] {
      cursor: default;
      .opacity(0.6);
    }

    // Confirm button disabled state
    &.confirm[disabled] {
      color: transparent;

      // Loading dots
      ~ .la-ball-fall {
        visibility: visible;
        .transition-delay(0s);
        .opacity(1);
      }
    }

    // Hack to remove border in FF
    &::-moz-focus-inner {
      border: 0;
    }
  }

  // If no cancel button
  &[data-has-cancel-button=false] {

    // Button
    button {
      .box-shadow(none) !important;
    }

    // If no confirm button
    &[data-has-confirm-button=false] {
      padding-bottom: 40px;
    }
  }

  // Error container
  .sa-error-container {
    background-color: #f5f5f5;
    overflow: hidden;
    padding: 0 @content-padding-small;
    max-height: 0;
    border-radius: @border-radius-base;
    @error-container-transition: padding 0.15s, max-height 0.15s;
    .transition(@error-container-transition);

    // Paragraph
    p {
      display: inline-block;
      margin-bottom: 0;
    }

    // When visible
    &.show {
      padding: @content-padding-small 0;
      max-height: 100px;
      @show-error-transition: padding 0.2s, max-height 0.2s;
      .transition(@show-error-transition);
    }

    // Icon
    .icon {
      display: inline-block;
      width: @icon-font-size;
      height: @icon-font-size;
      line-height: @icon-font-size;
      border-radius: 50%;
      background-color: @color-warning-400;
      color: white;
      text-align: center;
      margin-right: @element-horizontal-spacing;
    }
  }

  // Prompt error message
  .sa-input-error {
    position: absolute;
    top: 20px;
    right: @padding-base-horizontal;
    width: @icon-font-size;
    height: @icon-font-size;
    .scale(0.5);
    .transform-origin(50% 50%);
    .transition(all 0.1s);
    .opacity(0);

    // Cross icon
    &:before,
    &:after {
      content: "";
      width: @icon-font-size;
      height: 2px;
      background-color: @color-danger-400;
      border-radius: @border-radius-base;
      position: absolute;
      top: 50%;
      margin-top: -1px;
      left: 50%;
      margin-left: -8px;
    }
    &:before {
      .rotate(-45deg);
    }
    &:after {
      .rotate(45deg);
    }

    // When visible
    &.show {
      .scale(1);
      .opacity(1);
    }
  }

  // Prompt input field
  input {
    width: 100%;
    border-radius: @input-border-radius;
    border: 1px solid @input-border;
    margin-top: (@line-height-computed / 2);
    margin-bottom: (@line-height-computed / 2);
    font-size: @font-size-base;
    padding: @padding-base-vertical @padding-base-horizontal;
    display: none;
    .box-shadow(0px 1px 1px fade(#000, 5%) inset);
    .box-sizing(border-box);
    .placeholder(#bdbdbd);
    .transition(all 0.3s);

    // Focus state
    &:focus {
      outline: 0;

      // Animate placeholder
      &::-moz-placeholder,
      &:-ms-input-placeholder,
      &::-webkit-input-placeholder {
        .transition(opacity ease 0.3s 0.03s);
        .opacity(0.5);
      }
    }
  }

  // Show input field
  &.show-input input {
    display: block;
  }

  // Loading button
  .sa-confirm-button-container {
    display: inline-block;
    position: relative;
  }

  // Loading dots
  .la-ball-fall {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -27px;
    margin-top: 0;
    visibility: hidden;
    .opacity(0);
  }

  // Icons
  .sa-icon {
    width: 80px;
    height: 80px;
    border: 4px solid #ddd;
    border-radius: 50%;
    margin: (@line-height-computed / 2) auto @line-height-computed auto;
    padding: 0;
    position: relative;
    .box-sizing(content-box);

    // Error
    &.sa-error {
      border-color: @brand-danger;

      .sa-x-mark {
        position: relative;
        display: block;
      }

      .sa-line {
        position: absolute;
        height: 5px;
        width: 47px;
        background-color: @brand-danger;
        display: block;
        top: 37px;
        border-radius: @border-radius-small;

        &.sa-left {
          left: 17px;
          .rotate(45deg);
        }

        &.sa-right {
          right: 16px;
          .rotate(-45deg);
        }
      }
    }

    // Warning
    &.sa-warning {
      border-color: @brand-warning;

      .sa-body {
        position: absolute;
        width: 5px;
        height: 47px;
        left: 50%;
        top: 10px;
        border-radius: @border-radius-small;
        margin-left: -2px;
        background-color: @brand-warning;
      }
      .sa-dot {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        left: 50%;
        bottom: 10px;
        background-color: @brand-warning;
      }
    }

    // Info
    &.sa-info {
      border-color: @brand-primary;

      &:before {
        content: "";
        position: absolute;
        width: 5px;
        height: 29px;
        left: 50%;
        bottom: 17px;
        border-radius: @border-radius-small;
        margin-left: -2px;
        background-color: @brand-primary;
      }
      &:after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        top: 19px;
        background-color: @brand-primary;
      }
    }

    // Success
    &.sa-success {
      border-color: @brand-success;

      &:before,
      &:after {
        content: '';
        border-radius: 50%;
        position: absolute;
        width: 60px;
        height: 120px;
        background-color: #fff;
        .rotate(45deg);
      }
      &:before {
        border-radius: 120px 0 0 120px;
        top: -7px;
        left: -33px;
        .rotate(-45deg);
        .transform-origin(60px 60px)
      }
      &:after {
        border-radius: 0 120px 120px 0;
        top: -11px;
        left: 30px;
        .rotate(-45deg);
        .transform-origin(0 60px)
      }

      .sa-placeholder {
        width: 80px;
        height: 80px;
        border: 4px solid fade(@brand-success, 20%);
        border-radius: 50%;
        position: absolute;
        left: -4px;
        top: -4px;
        z-index: 2;
        .box-sizing(content-box);
      }

      .sa-fix {
        width: 5px;
        height: 90px;
        background-color: #fff;
        position: absolute;
        left: 28px;
        top: 8px;
        z-index: 1;
        .rotate(-45deg);
      }

      .sa-line {
        height: 5px;
        background-color: @brand-success;
        display: block;
        border-radius: @border-radius-small;
        position: absolute;
        z-index: 2;

        &.sa-tip {
          width: 25px;
          left: 14px;
          top: 46px;
          .rotate(45deg);
        }

        &.sa-long {
          width: 47px;
          right: 8px;
          top: 38px;
          .rotate(-45deg);
        }
      }
    }

    // Custom icon
    &.sa-custom {
      background-size: contain;
      border-radius: 0;
      border: 0;
      background-position: center center;
      background-repeat: no-repeat;
    }
  }

  // Mobile view
  @media (max-width: @screen-xs) {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    left: @grid-gutter-width;
    right: @grid-gutter-width;
  }
}

/* # Animations
-------------------------------------------------- */

// Modals
// ------------------------------

// Show
@-webkit-keyframes showSweetAlert {
  0% {
    .scale(0.7);
  }
  45% {
    .scale(1.05);
  }
  80% {
    .scale(0.95);
  }
  100% {
    .scale(1);
  }
}

@keyframes showSweetAlert {
  0% {
    .scale(0.7);
  }
  45% {
    .scale(1.05);
  }
  80% {
    .scale(0.95);
  }
  100% {
    .scale(1);
  }
}

.showSweetAlert[data-animation=pop] {
  .animation(showSweetAlert 0.3s); // with animation
}

.showSweetAlert[data-animation=none] {
  .animation(none); // without animation
}

// Hide
@-webkit-keyframes hideSweetAlert {
  0% {
    .scale(1);
  }
  100% {
    .scale(0.5);
  }
}

@keyframes hideSweetAlert {
  0% {
    .scale(1);
  }
  100% {
    .scale(0.5);
  }
}

.hideSweetAlert[data-animation=pop] {
  .animation(hideSweetAlert 0.2s); // with animation
}

.hideSweetAlert[data-animation=none] {
  .animation(none); // without animation
}

// Slide from top
@-webkit-keyframes slideFromTop {
  0% {
    top: 0%;
  }
  100% {
    top: 50%;
  }
}

@keyframes slideFromTop {
  0% {
    top: 0%;
  }
  100% {
    top: 50%;
  }
}

.showSweetAlert[data-animation=slide-from-top] {
  .animation(slideFromTop 0.3s);
}

// Slide to top
@-webkit-keyframes slideToTop {
  0% {
    top: 50%;
  }
  100% {
    top: 0%;
  }
}

@keyframes slideToTop {
  0% {
    top: 50%;
  }
  100% {
    top: 0%;
  }
}

.hideSweetAlert[data-animation=slide-from-top] {
  .animation(slideToTop 0.4s);
}

// Slide from bottom
@-webkit-keyframes slideFromBottom {
  0% {
    top: 70%;
  }
  100% {
    top: 50%;
  }
}

@keyframes slideFromBottom {
  0% {
    top: 70%;
  }
  100% {
    top: 50%;
  }
}

.showSweetAlert[data-animation=slide-from-bottom] {
  .animation(slideFromBottom 0.3s);
}

// Slide to bottom
@-webkit-keyframes slideToBottom {
  0% {
    top: 50%;
  }
  100% {
    top: 70%;
  }
}

@keyframes slideToBottom {
  0% {
    top: 50%;
  }
  100% {
    top: 70%;
  }
}

.hideSweetAlert[data-animation=slide-from-bottom] {
  .animation(slideToBottom 0.3s);
}

// Icons
// ------------------------------

// Success tip
@-webkit-keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}

@keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}

.animateSuccessTip {
  .animation(animateSuccessTip 0.75s);
}

// Success long
@-webkit-keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

@keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

.animateSuccessLong {
  .animation(animateSuccessLong 0.75s);
}

// Placeholder rotation
@-webkit-keyframes rotatePlaceholder {
  0% {
    .rotate(-45deg);
  }
  5% {
    .rotate(-45deg);
  }
  12% {
    .rotate(-405deg);
  }
  100% {
    .rotate(-405deg);
  }
}

@keyframes rotatePlaceholder {
  0% {
    .rotate(-45deg);
  }
  5% {
    .rotate(-45deg);
  }
  12% {
    .rotate(-405deg);
  }
  100% {
    .rotate(-405deg);
  }
}

.sa-icon.sa-success.animate::after {
  .animation(rotatePlaceholder 4.25s ease-in);
}

// Error
@-webkit-keyframes animateErrorIcon {
  0% {
    .rotateX(100deg);
    .opacity(0);
  }
  100% {
    .rotateX(0deg);
    .opacity(1);
  }
}

@keyframes animateErrorIcon {
  0% {
    .rotateX(100deg);
    .opacity(0);
  }
  100% {
    .rotateX(0deg);
    .opacity(1);
  }
}

.animateErrorIcon {
  .animation(animateErrorIcon 0.5s);
}

// "X" mark
@-webkit-keyframes animateXMark {
  0% {
    margin-top: 26px;
    .scale(0.4);
    .opacity(0);
  }
  50% {
    margin-top: 26px;
    .scale(0.4);
    .opacity(0);
  }
  80% {
    margin-top: -6px;
    .scale(1.15);
  }
  100% {
    margin-top: 0;
    .scale(1);
    .opacity(1);
  }
}

@keyframes animateXMark {
  0% {
    margin-top: 26px;
    .scale(0.4);
    .opacity(0);
  }
  50% {
    margin-top: 26px;
    .scale(0.4);
    .opacity(0);
  }
  80% {
    margin-top: -6px;
    .scale(1.15);
  }
  100% {
    margin-top: 0;
    .scale(1);
    .opacity(1);
  }
}

.animateXMark {
  .animation(animateXMark 0.5s);
}

// Warning pulsate
@-webkit-keyframes pulseWarning {
  0% {
    border-color: #F8D486;
  }
  100% {
    border-color: #F8BB86;
  }
}

@keyframes pulseWarning {
  0% {
    border-color: #F8D486;
  }
  100% {
    border-color: #F8BB86;
  }
}

.pulseWarning {
  .animation(pulseWarning 0.75s infinite alternate);
}

// Warning pulsate
@-webkit-keyframes pulseWarningIns {
  0% {
    background-color: #F8D486;
  }
  100% {
    background-color: #F8BB86;
  }
}

@keyframes pulseWarningIns {
  0% {
    background-color: #F8D486;
  }
  100% {
    background-color: #F8BB86;
  }
}

.pulseWarningIns {
  .animation(pulseWarningIns 0.75s infinite alternate);
}

// Loading rotation
@-webkit-keyframes rotate-loading {
  0% {
    .rotate(0deg);
  }
  100% {
    .rotate(360deg);
  }
}

@keyframes rotate-loading {
  0% {
    .rotate(0deg);
  }
  100% {
    .rotate(360deg);
  }
}

// Internet Explorer 9 has some special quirks that are fixed here. The icons are not animated.
.sweet-alert {
  .sa-icon {

    // Error
    &.sa-error .sa-line {

      // Left
      &.sa-left {
        -ms-transform: rotate(45deg);
      }

      // Right
      &.sa-right {
        -ms-transform: rotate(-45deg);
      }
    }

    // Success
    &.sa-success {
      border-color: transparent;

      // Line
      .sa-line {

        // Tip
        &.sa-tip {
          -ms-transform: rotate(45deg);
        }

        // Long
        &.sa-long {
          -ms-transform: rotate(-45deg);
        }
      }
    }
  }
}

// Loading dots
// ------------------------------

// Base
.la-ball-fall {
  display: block;
  font-size: 0;
  color: #fff;
  width: 54px;
  height: 12px;

  // Dark color
  &.la-dark {
    color: @text-color;
  }

  // Dots
  > div {
    display: inline-block;
    float: none;
    background-color: #fff;
    border: 0 solid #fff;
    width: 6px;
    height: 6px;
    margin: 2px;
    border-radius: 100%;
    .animation(ball-fall 1s ease-in-out infinite);
    .opacity(0);

    // First
    &:nth-child(1) {
      .animation-delay(-200ms);
    }

    // Second
    &:nth-child(2) {
      .animation-delay(-100ms);
    }

    // Third
    &:nth-child(3) {
      .animation-delay(0ms);
    }
  }

  // Small size
  &.la-sm {
    width: 26px;
    height: 8px;

    // Dots
    > div {
      width: 4px;
      height: 4px;
      margin: 2px;
    }
  }

  // Double sized
  &.la-2x {
    width: 108px;
    height: 36px;

    // Dots
    > div {
      width: 20px;
      height: 20px;
      margin: 8px;
    }
  }

  // Triple sized
  &.la-3x {
    width: 162px;
    height: 54px;

    // Dots
    > div {
      width: 30px;
      height: 30px;
      margin: 12px;
    }
  }
}

// Animation
@-webkit-keyframes ball-fall {
  0% {
    .translate(0; -145%);
    .opacity(0);
  }
  10% {
    .opacity(0.5);
  }
  20% {
    .translate(0; 0);
    .opacity(1);
  }
  80% {
    .translate(0; 0);
    .opacity(1);
  }
  90% {
    .opacity(0.5);
  }
  100% {
    .translate(0; 145%);
    .opacity(0);
  }
}

@-moz-keyframes ball-fall {
  0% {
    .translate(0; -145%);
    .opacity(0);
  }
  10% {
    .opacity(0.5);
  }
  20% {
    .translate(0; 0);
    .opacity(1);
  }
  80% {
    .translate(0; 0);
    .opacity(1);
  }
  90% {
    .opacity(0.5);
  }
  100% {
    .translate(0; 145%);
    .opacity(0);
  }
}

@-o-keyframes ball-fall {
  0% {
    .translate(0; -145%);
    .opacity(0);
  }
  10% {
    .opacity(0.5);
  }
  20% {
    .translate(0; 0);
    .opacity(1);
  }
  80% {
    .translate(0; 0);
    .opacity(1);
  }
  90% {
    .opacity(0.5);
  }
  100% {
    .translate(0; 145%);
    .opacity(0);
  }
}

@keyframes ball-fall {
  0% {
    .translate(0; -145%);
    .opacity(0);
  }
  10% {
    .opacity(0.5);
  }
  20% {
    .translate(0; 0);
    .opacity(1);
  }
  80% {
    .translate(0; 0);
    .opacity(1);
  }
  90% {
    .opacity(0.5);
  }
  100% {
    .translate(0; 145%);
    .opacity(0);
  }
}
